import React, { PureComponent }from 'react';
import PropTypes from 'prop-types';
import moment from 'moment';
import { Radio, Form, Input, Upload, Icon, Button, message, Collapse, Timeline } from 'antd';


const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const { TextArea } = Input
const Panel = Collapse.Panel;

class WrappedAddHoliday extends PureComponent {
  renderTips = (value) => {
    const { onSelectDate } = this.props;
    let date = '';
    let du = 0;
    if(onSelectDate.length === 0) {
      date = <span>请选择您要申请的日期！</span>
    } else if (onSelectDate.length === 1) {
      date = <span>{onSelectDate[0]}</span>
      du = '1';
    } else if (onSelectDate.length === 2) {
       du = moment(moment(onSelectDate[1]) - moment(onSelectDate[0])).format('D');
      date = <span>{`${onSelectDate[0]} - ${onSelectDate[1]}`}</span>
    }
    return(
      <div>
        <FormItem {...value} label="假期日期">
            {date}
        </FormItem>
        <FormItem
          {...value}
          label="假期天数"
        >
          <div>
            {`${du}天`}
          </div>
        </FormItem>
      </div>
    )
  }
  // 发送表单数据
  handleSubmit = (e) => {
    const { onSelectDate } = this.props;
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        if(onSelectDate.length === 0) {
          message.error('请选择您申请的日期！');
          return null;
        }
        message.success('申请已提交！', () => {this.props.history.push('/holiday/menu');});

      }
    });
  };
  render(){
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
    };

    return(
      <div>
        <Form onSubmit={this.handleSubmit}>
          {this.renderTips(formItemLayout)}
          <FormItem
            {...formItemLayout}
            label="假期类型"
          >
            {getFieldDecorator('radio-group', {
              rules: [{
                required: true, message: '请选择您的假期类型！',
              }],
            })(
              <RadioGroup>
                <Radio value="personal leave">事假</Radio>
                <Radio value="sick leave">病假</Radio>
              </RadioGroup>
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="申请原因"
          >
            {getFieldDecorator('textarea', {
              rules: [{
                required: true, message: '请选择填写您申请假期的原因！',
              }],
            })(
              <TextArea />
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="相关证明"
          >
              <Upload.Dragger name="files" action="/upload.do">
                  <Icon type="plus" />
              </Upload.Dragger>
          </FormItem>
          <FormItem
            wrapperCol={{ span: 12, offset: 4 }}
          >
            <Button type="primary" htmlType="submit">提交申请</Button>
          </FormItem>
        </Form>
      </div>
    );
  }
}

export const  AddHoliday = Form.create()(WrappedAddHoliday);

export class HolidayMenu extends PureComponent {
  render(){
    return(
      <div>
        <Collapse bordered={false} accordion>
          <Panel header="2018-09-20" key="1">
            <Timeline>
              <Timeline.Item color="green">申请已提交，请等待领导的审批。</Timeline.Item>
              <Timeline.Item dot={<Icon type="clock-circle-o" style={{ fontSize: '14px' }} />} color="blue">主管审批中...</Timeline.Item>
              <Timeline.Item color="#CDCDCD">总经理审批...</Timeline.Item>
            </Timeline>
          </Panel>
          <Panel header="2018-07-04" key="2">
            <Timeline>
              <Timeline.Item color="green">申请已提交，请等待领导的审批。</Timeline.Item>
              <Timeline.Item color="green">主管已通过申请...</Timeline.Item>
              <Timeline.Item color="green">总经理已通过申请...</Timeline.Item>
              <Timeline.Item color="green">申请已通过...</Timeline.Item>
            </Timeline>
          </Panel>
          <Panel header="2018-04-05" key="3">
            <Timeline>
              <Timeline.Item color="green">申请已提交，请等待领导的审批。</Timeline.Item>
              <Timeline.Item color="red">主管拒绝申请，原因： 业务繁忙。</Timeline.Item>
              <Timeline.Item color="#CDCDCD">总经理审批...</Timeline.Item>
            </Timeline>
          </Panel>
        </Collapse>
      </div>
    );
  }
}
